<!-- PersonalInfo.vue -->
<template>
  <div class="card">
    <div class="card-header">
      <h1 class="header-title">个人信息</h1>
    </div>
    <ProfileCard></ProfileCard>
    <div class="info-list">
      <div class="info-item">
        <span class="dot blue"></span>
        <span>今日已开启会话 <strong>10个</strong></span>
      </div>
      <div class="info-item">
        <span class="dot green"></span>
        <span>今日已学习 <strong>30min</strong></span>
      </div>
      <div class="info-item">
        <span class="dot red"></span>
        <span>今日已掌握知识点 <strong>20个</strong></span>
      </div>
      <div class="info-item">
        <span class="dot blue"></span>
        <span>今日最高频知识点 <strong>一次二次方程</strong></span>
      </div>
    </div>
    <CollectCard></CollectCard>
  </div>
  </template>

  <script setup name="Info">
  import { ref } from 'vue';
  import ProfileCard from './ProfileCard.vue';
import CollectCard from './CollectCard.vue';
  // Add any reactive data or methods here if needed
  </script>

  <style scoped>
  .card {
  margin-top: 70px;
  width: 90%;
  margin: auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.card-header{
  display: flex;
}
  .personal-info {
  /* margin: auto; */
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

    padding: 20px;
  }

  .info-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
  }

  .profile-picture {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 10px;
  }

  .name {
    font-weight: bold;
    margin: 0;
  }

  .school {
    color: gray;
    margin: 0;
  }
  .info-list {
  margin: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px; /* Space between items */
}

.info-item {
  margin: 10px 40px;
  display: flex;
  align-items: center;
  font-size: 16px; /* Adjust font size as needed */
  color: #4A4A4A; /* Default text color */
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 10px; /* Space between dot and text */
}

.blue {
  background-color: #3498db; /* Blue color */
}

.green {
  background-color: #2ecc71; /* Green color */
}

.red {
  background-color: #e74c3c; /* Red color */
}

.info-item strong {
  font-weight: bold; /* Bold text for emphasis */
}

  </style>
